<template>
	<view>
		<aaVue :scrollTop="scrollTop" />
		<view class="app-container">
			<view class="category">
				<view class="category-item flex items-center" v-for="(item,index) in categoryList" :key="index">
					<image class="icon" :src="`../../static/icon/index/category-${index+1}.png`"></image>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
			<view style="height: 200rpx;">
				<image src="https://v6.site.niucloud.com/addon/shop/diy/index/style3/discount_img.png"
					style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<view class="hot-box my-lg">
				<view class="card-item">
					<view class="flex items-center">
						<view class="title">热卖榜单</view>
						<view class="type">人气之选</view>
					</view>
					<view style="gap: 20rpx;margin-top: 10rpx;" class="flex">
						<view class="flex-1">
							<image src="https://qny.smzdm.com/202401/14/65a3346bd00fc6638.jpg_d250.jpg"></image>
							<view class="tag">年货礼盒榜</view>
						</view>
						<view class="flex-1">
							<image
								src="https://img1.baidu.com/it/u=36238114,4130283930&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
							<view class="tag">精选水果榜</view>
						</view>
					</view>
				</view>
				<view class="card-item">
					<view class="flex items-center">
						<view class="title">时令上新</view>
						<view class="type">0元体验</view>
					</view>
					<view style="gap: 20rpx;margin-top: 10rpx;" class="flex">
						<view class="flex-1">
							<image
								src="https://img2.baidu.com/it/u=1968857140,2134551668&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"></image>
							<view class="tag">时令尝鲜</view>
						</view>
						<view class="flex-1">
							<image
								src="https://img0.baidu.com/it/u=3447148305,3942764600&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"></image>
							<view class="tag">应季精选</view>
						</view>
					</view>
				</view>
			</view>
			<view class="new-people">
				<swiper :duration="1000">
					<swiper-item v-for="n in [0,1]" :key="n">
						<view v-for="(item,index) in newPeopleGoodsList" :key="index" class="swiper-item">
							<image :src="item.goods_image"></image>
							<view class="name">新人专享</view>
							<view>
								<text class="symbol">￥</text>
								<text class="price">{{item.price}}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="group-buy my-lg">
				<view class="header flex items-center">
					<view class="left">
						<view class="title">
							超值拼团
						</view>
					</view>
					<view class="right">更多></view>
				</view>
				<scroll-view scroll-x="true">
					<view class="main flex">
						<view class="goods-item" v-for="(item,index) in groupGoodsList" :key="index">
							<image :src="item.goods_image"></image>
							<view class="name">{{item.goods_name}}</view>
							<view class="flex price-info">
								<view>
									<text class="symbol">￥</text>
									<text class="price">{{item.price}}</text>
								</view>
								<view class="group-btn">
									去参团
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="goods">
				<view class="goods-item" v-for="(item,index) in goodsList" :key="index">
					<image :src="item.goods_image" mode=""></image>
					<view class="basic-info">
						<view class="title">
							<uv-text :lineHeight="20" :lines="2" :size="14" :text="item.title"></uv-text>
						</view>
						<view class="my-sm">
							<text class="symbol">￥</text>
							<text class="price">{{item.minprice}}</text>
						</view>
						<view class="sales">已售0件</view>
					</view>
					<view class="buy-btn" @click="toGoodsDetails(item)">购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		listGoods
	} from '@/api/goods.js'
	import {
		reactive,
		ref
	} from 'vue';
	import aaVue from './components/aa.vue';
	const categoryList = [{
		name: '新鲜蔬菜'
	}, {
		name: '鲜肉蛋禽'
	}, {
		name: '优选水果'
	}, {
		name: '海鲜水产'
	}, {
		name: '蛋糕甜点'
	}, {
		name: '牛奶乳品'
	}, {
		name: '厨房调料'
	}, {
		name: '米面粮油'
	}, {
		name: '卤味蔬食'
	}, {
		name: '饮料酒水'
	}];
	const newPeopleGoodsList = [{
			goods_image: 'http://cgb-mall-yanshi.oss-cn-beijing.aliyuncs.com/upload/1/common/images/20240727/20240727051733172207185306822.jpg',
			price: '29.90'
		},
		{
			goods_image: 'http://cgb-mall-yanshi.oss-cn-beijing.aliyuncs.com/upload/1/common/images/20240727/20240727044856172207013606348.jpg',
			price: '75.55'
		},
		{
			goods_image: 'http://cgb-mall-yanshi.oss-cn-beijing.aliyuncs.com/upload/1/common/images/20240727/20240727050543172207114387261.jpg',
			price: '168.30'
		}
	];
	const groupGoodsList = [{
			goods_image: 'http://cgb-mall-yanshi.oss-cn-beijing.aliyuncs.com/upload/1/common/images/20240727/20240727040637172206759708846.jpg',
			goods_name: '好吃不上火',
			price: '29.90'
		},
		{
			goods_image: 'http://cgb-mall-yanshi.oss-cn-beijing.aliyuncs.com/upload/1/common/images/20240727/20240727043738172206945890310.png',
			goods_name: '好吃不上火',
			price: '75.55'
		},
		{
			goods_image: 'http://cgb-mall-yanshi.oss-cn-beijing.aliyuncs.com/upload/1/common/images/20240727/20240727043738172206945868374.png',
			goods_name: '好吃不上火',
			price: '68.30'
		},
		{
			goods_image: 'http://cgb-mall-yanshi.oss-cn-beijing.aliyuncs.com/upload/1/common/images/20240727/20240727040637172206759708846.jpg',
			goods_name: '好吃不上火',
			price: '29.90'
		},
		{
			goods_image: 'http://cgb-mall-yanshi.oss-cn-beijing.aliyuncs.com/upload/1/common/images/20240727/20240727043738172206945890310.png',
			goods_name: '好吃不上火',
			price: '75.55'
		},
		{
			goods_image: 'http://cgb-mall-yanshi.oss-cn-beijing.aliyuncs.com/upload/1/common/images/20240727/20240727043738172206945868374.png',
			goods_name: '好吃不上火',
			price: '68.30'
		}
	];
	onShow(() => {
		console.log("123123")
		getGoodsList()
	})

	/**
	 * 商品详情
	 */
	const toGoodsDetails = (item) => {
		console.log(item);
		uni.navigateTo({
			url: '/pages/goodsDetails/goodsDetails'
		})
	}

	const goodsList = reactive([])
	const getGoodsList = async () => {
		const res = await listGoods()
		goodsList.push(...res.data?.data)
	}
	const scrollTop = ref(0)
	onPageScroll(e => {
		scrollTop.value = e.scrollTop
	})
</script>

<style lang="scss" scoped>
	@import 'style.scss';
</style>